<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/about' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">商品管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card style="margin-top: 20px">
      <el-button type="primary" @click="add" plain>添加分类</el-button>
      <!-- 表格 -->
      <tree-table
        style="margin-top: 20px"
        :data="list"
        :show-index="true"
        :columns="columns"
        index-text="索引"
        :expand-type="false"
        :selection-type="false"
      >
        <!-- 是否有效 -->
        <template slot="isOk" slot-scope="scope">
          <i
            class="el-icon-success"
            style="color: #90ee90"
            v-if="scope.row.cat_deleted == false"
          ></i>
          <i class="el-icon-error" style="color: red" v-else></i>
        </template>
        <!-- 排序 -->
        <template slot="sort" slot-scope="scope">
          <el-tag v-if="scope.row.cat_level == 0">一级</el-tag>
          <el-tag v-if="scope.row.cat_level == 1" type="success">二级</el-tag>
          <el-tag v-if="scope.row.cat_level == 2" type="danger">三级</el-tag>
        </template>
        <!-- 操作 -->
        <template slot="operate" slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </tree-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[5, 8, 10, 15]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!--  添加弹出框 -->
      <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
        <el-form
          :model="ruleForm"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="分类名称">
            <el-input v-model="ruleForm.cat_name"></el-input>
          </el-form-item>
          <el-form-item label="父级分类:">
            <el-cascader
              v-model="selectedKeys"
              :options="pList"
              :props="props"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 编辑弹出框 -->
      <el-dialog title="编辑分类" :visible.sync="dialogFormVisible1">
        <el-form
          :model="ruleForm1"
          ref="ruleForm1"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="分类名称">
            <el-input v-model="ruleForm1.cat_name"></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="submitForm1">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "categories",
  data() {
    return {
      //   编辑分类的相关
      ruleForm1: {
        cat_name: "",
      },
      // 编辑的弹框
      dialogFormVisible1: false,
      // cascader 的双向数据绑定
      selectedKeys: [],
      // 添加的弹框
      dialogFormVisible: false,
      pList: [],
      //   添加分类的相关
      ruleForm: {
        cat_name: "",
        cat_pid: "",
      },
      //   层级选择器相关
      props: {
        expandTrigger: "hover",
        label: "cat_name",
        value: "cat_id",
        children: "children",
        checkStrictly: "true",
      },
      //   分页
      pagenum: 1, //  第几页
      pagesize: 5, //  每页显示的条数
      total: 0,
      list: [],
      columns: [
        {
          label: "分类名称",
          prop: "cat_name",
        },
        {
          label: "是否有效",
          type: "template",
          template: "isOk",
        },
        {
          label: "排序",
          type: "template",
          template: "sort",
        },
        {
          label: "操作",
          type: "template",
          template: "operate",
        },
      ],
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    // 编辑
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogFormVisible1 = true;
      this.ruleForm1 = row;
    },
    //   编辑的接口
    async submitForm1() {
      let result = await this.$axios({
        url: `api/private/v1/categories/${this.ruleForm1.cat_id}`,
        method: "PUT",
        data: this.ruleForm1,
      });
      console.log(result);
      if (result.data.meta.status != 200)
        return this.$message.error(result.data.meta.msg);
      this.dialogFormVisible1 = false;
      this.$message.success(result.data.meta.msg);
      this.getdata();
    },
    //   删除 
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          var res = await this.$axios({
            url: `/api/private/v1/categories/${row.cat_id}`,
            method: "delete",
          });
          console.log(res, "删除分类");
          this.getdata();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 添加弹框显示
    async add() {
      this.dialogFormVisible = true;
      let { data: res } = await this.$axios({
        url: "/api/private/v1/categories",
        params: {
          type: 2,
        },
      }).catch((err) => err);
      console.log(res, "res");
      this.pList = res.data;
    },
    // 添加请求接口
    async submitForm() {
      let cat_pid;
      let cat_level;
      if (this.selectedKeys.length == 0) {
        cat_pid = 0;
        cat_level = 0;
      } else {
        cat_pid = this.selectedKeys[this.selectedKeys.length - 1];
        cat_level = this.selectedKeys.length;
      }
      let { data: res } = await this.$axios({
        url: "/api/private/v1/categories",
        method: "POST",
        data: {
          cat_level: cat_level,
          cat_pid: cat_pid,
          cat_name: this.ruleForm.cat_name,
        },
      }).catch((err) => err);
      console.log(res, "categories添加");
      if (res.meta.status !== 201) return this.$message.error("添加分类失败");
      this.$message.success("添加分类成功");
      this.dialogFormVisible = false;
      this.getdata();
    },
    //
    handleChange() {},
    //  每页显示的条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.getdata();
    },
    //   当前页数
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagenum = val;
      this.getdata();
    },
    // 渲染
    async getdata() {
      let { data: res } = await this.$axios({
        url: "/api/private/v1/categories",
        method: "GET",
        params: {
          pagesize: this.pagesize,
          pagenum: this.pagenum,
        },
      }).catch((err) => err);
      console.log(res, "categories渲染");
      if (res.meta.status !== 200) return this.$message.error("数据请求错误");
      this.list = res.data.result;
      this.total = res.data.total;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>